<template>
	<div class="loginBox">
		<div class="loginTitle">登录</div>
		<div
			class="loginIpt"
			:style="{ transform: Animation ? 'translate(-50%,0)' : 'translate(-50%,1000%)' }"
		>
			<van-cell-group>
				<van-field
					v-model.trim="form.userName"
					left-icon="../../assets/img/user.png"
					placeholder="请输入您的账号"
				>
					<template #left-icon>
						<img class="loginImg" src="../../assets/img/user.png" alt="" />
					</template>
				</van-field>
				<van-field
					v-model="form.password"
					type="password"
					left-icon="../../assets/img/user.png"
					placeholder="请输入您的密码"
				>
					<template #left-icon>
						<img class="loginImg" src="../../assets/img/password.png" alt="" />
					</template>
				</van-field>
				<!-- <div class="codeContent">
          <van-field v-model.trim="form.code" placeholder="请输入验证码">
          </van-field>
          <img class="codeBox" :src="imgSrc" alt="" @click="getCodeImg">
        </div> -->
			</van-cell-group>
			<div class="loginOptions">
				<van-checkbox icon-size="15px" v-model="isSaveAccount" shape="square"
					>记住账号密码</van-checkbox
				>
			</div>
			<div class="loginSubmitBox">
				<van-button
					style="z-index: 9"
					:loading="loading"
					color="#3B86FF"
					size="normal"
					round
					type="primary"
					block
					@click="toLogin"
					>立即登录</van-button
				>
				<div class="pop-small"></div>
				<div class="pop-big"></div>
			</div>
		</div>
		<updatePwdDialog
			v-if="showDialog"
			:required="required"
			:msg="msg"
			@cancel="cancel"
			@submit="submitForm"
			:form="form"
		></updatePwdDialog>
	</div>
</template>

<script>
import rules from '@/utils/filedRules'
import {
	login,
	getUserCheckPwd,
	getIsCodeImg,
	getCodeImg,
	updatePwd,
	changePwd
} from '@/api/user.js'
import { Sm4encrypt, Sm4Dncrypt } from '@/utils/encryption.js'
import { mapGetters } from 'vuex'
import updatePwdDialog from './updatePwd.vue'
export default {
	name: 'login',
	components: {
		updatePwdDialog
	},
	data() {
		return {
			Animation: false,
			rules: rules,
			msg: '',
			updateForm: {},
			showDialog: false,
			required: false,
			loginData: {},
			captchaKey: '',
			imgSrc: '',
			isCodeImgStatus: false,
			loading: false,
			form: {
				userName: '',
				password: ''
			},
			isSaveAccount: false
		}
	},
	computed: { ...mapGetters(['accountAndPass']) },
	created() {
		setTimeout(() => {
			this.Animation = true
		}, 100)
		if (this.accountAndPass.userName) {
			this.isSaveAccount = true
			this.form.password = this.accountAndPass.password
			this.form.userName = this.accountAndPass.userName
		}
		this.isfullscreen()
	},
	methods: {
		// 	 fullscreen(){
		//         // 设置应用全屏显示！
		//         plus.navigator.setFullscreen(true);
		// }
		//  unfullscreen(){
		//         // 设置应用非全屏显示！
		//         plus.navigator.setFullscreen(false);
		// }
		isfullscreen() {
			// 查询应用当前是否全屏显示！
			// console.log('是否全屏：' + (plus.navigator.isFullscreen() ? '是' : '否'))
		},
		submitForm(data) {
			this.updateForm.originalPasswrod = Sm4encrypt(data.originalPassWord)
			this.updateForm.newPasswrod = Sm4encrypt(data.newPassword)
			changePwd(this.updateForm).then((result) => {
				if (result.succeed) {
					this.$toast('修改成功')
					this.showDialog = false
					this.$store.dispatch('user/logout')
					location.reload()
				}
			})
		},

		cancel() {
			// 存储账号密码
			if (this.isSaveAccount) {
				this.$store.commit('user/saveAccount', this.form)
			}
			// 存储字典
			this.$store.dispatch('user/getDict')
			// 存储用户信息
			this.$store.commit('user/saveUserInfo', this.loginData)
			this.loading = false
			this.$router.push({
				path: '/home'
			})
			this.showDialog = false
		},
		async getCodeImg() {
			try {
				const res = await getCodeImg()
				if (res.succeed) {
					// this.imgSrc = `data:image/png;base64,${result.data.base64Img}`
					this.imgSrc = res.data.base64Img
					this.captchaKey = res.data.captchaKey
				}
			} catch (err) {
				console.log(err)
			}
		},
		// 获取验证码装态
		async getIsCodeImg() {
			try {
				const res = await getIsCodeImg({ code: 'CAPTCHA_ENABLED' })
				if (res.succeed) {
					this.isCodeImgStatus = res.data.CAPTCHA_ENABLED.value != 0
				}
			} catch (err) {
				console.log(err)
			}
		},
		async getCheckPwd() {
			const res = await getUserCheckPwd()
			if (res.succeed && res.status === 200) {
				// 存储账号密码
				if (this.isSaveAccount) {
					this.$store.commit('user/saveAccount', this.form)
				}
				// 存储字典
				this.$store.dispatch('user/getDict')
				// 存储用户信息
				this.$store.commit('user/saveUserInfo', this.loginData)
				this.loading = false
				this.$router.push({
					path: '/home'
				})
			} else if (
				res.status === 1001 ||
				res.status === 1002 ||
				res.status === 1003 ||
				res.status === 1004
			) {
				if (res.status === 1001 || res.status === 1002) {
					this.required = true
				} else if (res.status === 1003 || res.status === 1004) {
					this.required = false
				}
				this.showDialog = true
				this.msg = res.msg
			}
		},
		checkLoginInfo() {
			if (!this.form.userName) {
				this.$toast('账号不能为空')
				this.isAbleLogin = false
			}
			if (!this.form.password) {
				this.$toast('密码不能为空')
				this.isAbleLogin = false
			}
			if (this.form.password && this.form.userName) {
				this.isAbleLogin = true
			}
		},
		toLogin() {
			this.checkLoginInfo()
			if (!this.isAbleLogin) {
				return
			}
			this.loading = true
			let params = {
				userName: this.form.userName,
				password: Sm4encrypt(this.form.password)
				// captcha: this.form.code,
				// captchaKey: this.captchaKey
			}
			login(params)
				.then((res) => {
					if (res.succeed) {
						this.loginData = res.data
						// this.getCheckPwd()
						// 存储账号密码
						console.log('存储账号密码', this.form)
						if (this.isSaveAccount) {
							this.$store.commit('user/saveAccount', this.form)
						}
						// 存储字典
						this.$store.dispatch('user/getDict')
						// 存储评估版本
						this.$store.dispatch('user/getVersion')
						// 存储用户信息
						this.$store.commit('user/saveUserInfo', this.loginData)
						this.loading = false
						this.$router.push({
							path: '/home'
						})
					} else {
						this.loading = false
					}
				})
				.catch((err) => {
					this.loading = false
				})
		}
	}
}
</script>
<style lang="less" scoped>
.loginBox {
	overflow: hidden;
	position: relative;
	width: 100vw;
	height: 100vh;
	background-image: url('../../assets/img/loginBg.png');
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-color: #fff;
	.loginTitle {
		position: absolute;
		left: 80px;
		top: 400px;
		color: #3b86ff;
		font-weight: Bold;
		font-size: 32px;
		letter-spacing: 7px;

		&::after {
			content: '';
			width: 35px;
			height: 9px;
			background-color: #3b86ff;
			position: absolute;
			bottom: -15px;
			left: 47%;
			transform: translateX(-50%);
		}
	}

	.loginIpt {
		width: 85%;
		position: absolute;
		left: 50%;
		transition-duration: 1500ms;
		transition-timing-function: ease;
		top: 580px;
		.loginImg {
			width: 30px;
		}

		/deep/ .van-cell {
			margin-bottom: 40px;
			background-color: #ebebeb !important;
			border-radius: 100px;
			height: 100px;
			line-height: 100px;
		}

		/deep/ .van-field__left-icon {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		/deep/ .van-field__body {
			height: 100%;
		}

		/deep/ .van-checkbox__label {
			font-size: 28px;
		}

		::v-deep .van-field__control::-webkit-input-placeholder {
			//   color: #666666;
			font-size: 28px;
			//   font-weight: 600;
		}

		/deep/ .van-cell-group {
			background-color: rgba(255, 255, 255, 0);
		}
	}

	.loginOptions {
		display: flex;
		justify-content: flex-end;
		font-size: 30px;
	}

	.loginSubmitBox {
		margin-top: 80px;
		position: relative;
	}
	.pop-small {
		position: absolute;
		top: -50%;
		left: -180px;
		width: 300px;
		height: 300px;
		border-radius: 300px;
		background-color: #f8fafe;
	}
	.pop-big {
		position: absolute;
		bottom: -600px;
		right: -200px;
		width: 600px;
		height: 600px;
		border-radius: 600px;
		background-color: #f8fafe;
	}
}

/deep/ .van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
	border: none;
}

// /deep/ .van-cell {
//   margin-bottom: 40px;
//   background-color: #ebebeb !important;
//   border-radius: 120px;
//   height: 140px;
//   line-height: 140px;
// }

// /deep/ .van-field__left-icon {
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }

// /deep/ .van-field__body {
//   height: 100%;
// }

// /deep/ .van-checkbox__label {
//   font-size: 42px;
// }

// ::v-deep .van-field__control::-webkit-input-placeholder {
//   //   color: #666666;
//   font-size: 36px;
//   //   font-weight: 600;
// }

// /deep/ .van-cell-group {
//   background-color: rgba(255, 255, 255, 0);
// }

.codeContent {
	position: relative;
}

.codeBox {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 29%;
}

.dialogContent {
	padding: 10px 20px;

	.msg {
		height: 100px;
		line-height: 50px;
		text-indent: 2em;
		width: 100%;
		background-color: #fff4e2;
		margin-bottom: 20px;
		color: red;
		font-size: 30px;
	}

	.van-cell {
		height: 100px;
		line-height: 100px;
		background-color: #fff !important;
		padding: 0;

		::v-deep .van-field__control {
			background-color: #fff !important;
		}

		::v-deep .van-field__label {
			font-size: 30px;
			text-align: right;
		}
	}
}

.pwd-tips {
	text-indent: 2em;
	color: red;
	font-size: 30px;
}

.pwd-tips {
	margin-bottom: 10px;
}
</style>
